<template>
  <hr />
  <h2 style="margin-left: 50px">基本信息</h2>
  <hr />
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <table>
      <tr>
        <td>
          <el-form-item label="姓名" prop="employeeName">
            <el-input v-model="ruleForm.employeeName" placeholder="请输入姓名" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择性别">
              <el-option label="男" :value="true" />
              <el-option label="女" :value="false" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="院校" prop="colleges">
            <el-input v-model="ruleForm.colleges" placeholder="请输入院校" />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="专业" prop="specialized">
            <el-input v-model="ruleForm.specialized" placeholder="请输入专业" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入家庭住址" />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="学历" prop="degree">
            <el-select v-model="ruleForm.degree" placeholder="请选择学历">
              <el-option label="初中" value="初中" />
              <el-option label="高中" value="高中" />
              <el-option label="中专" value="中专" />
              <el-option label="大专" value="大专" />
              <el-option label="大学" value="大学" />
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="政治面貌">
            <el-input v-model="ruleForm.politicalOutlook" placeholder="请输入政治面貌" />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="民族">
            <el-input v-model="ruleForm.ethnicGroup" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="籍贯">
            <el-input v-model="ruleForm.origin" />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="婚姻">
            <el-input v-model="ruleForm.marriage" placeholder="请输入婚姻状况" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="出生年月">
            <el-input v-model="ruleForm.dateOfBirth" placeholder="请选择出生年月" />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="邮箱">
            <el-input v-model="ruleForm.mailbox" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="身份证号">
            <el-input v-model="ruleForm.identityCard" />
          </el-form-item>
        </td>
      </tr>
    </table>
    <hr />
    <h2 style="margin-left: 50px">职业信息</h2>
    <hr />
    <table>
      <tr>
        <td>
          <el-form-item label="部门" prop="departmentId" style="width: 280px">
            <el-select
              v-model="ruleForm.departmentId"
              placeholder="请选中部门"
              @change="bumen"
            >
              <el-option
                v-for="item in Department"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="职位" prop="postsId" style="width: 280px">
            <el-select
              v-model="ruleForm.postsId"
              placeholder="请选择职位"
              @change="zhiwei"
            >
              <el-option
                v-for="item in Position"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="员工类别" prop="employeeCategory">
            <el-select v-model="ruleForm.employeeCategory" placeholder="请选择员工类别">
              <el-option label="试用工" value="试用工" />
              <el-option label="实习生" value="实习生" />
              <el-option label="正式员工" value="正式员工" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
    </table>
    <el-form-item style="margin-left: 200px">
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRoute } from 'vue-router';
import router from '@/router';
onMounted(()=>{
    GetModel();
})
const route=useRoute();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id:route.query.id,
  "employeeName": "",
  "sex": "",
  "phone": "",
  "colleges": "",
  "specialized": "",
  "address": "",
  "degree": "",
  "politicalOutlook": "",
  "ethnicGroup": "",
  "origin": "",
  "marriage": "",
  "dateOfBirth": "",
  "mailbox": "",
  "identityCard": "",
  "departmentId": "",
  "postsId": "",
  "employeeCategory": "",
  "state": 0,
  "firmId": "string",
  "userId": 0,
  "approvalStatus": 0,
  "createName": "string",
  "createDate": "2024-11-19T01:57:50.288Z"
})

const locationOptions = ['Home', 'Company', 'School']
//部门
const Department = ref([
    { label: 'CEO', value: 1 },
    { label: '财务部', value: 2 },
    { label: '运营部', value: 3 },
    { label: '人事部', value: 4 },
    { label: '策划部', value: 5 },
])
//职位
const Positions = ref([
    { label: '董事长', value: 1},
    { label: '财务部长', value: 2},
    { label: '运营部长', value: 3},
    { label: '人事部长', value: 4},
    { label: '策划部长', value: 5},
])
const Position=ref([]);
//获取部门信息
const bumen=(id:number)=>{
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
    if (selectedPosition) {
      ruleForm.departmentId = selectedPosition.label;
    }
}
//获取职位信息
const zhiwei=(id:number)=>{
  const selectedPosition = Positions.value.find(position => position.value === id);
    if (selectedPosition) {
        ruleForm.postsId = selectedPosition.label;
    }
}
//正则验证
const rules = reactive<FormRules>({
  employeeName: [
    { required: true, message: '姓名为必填项', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  phone: [
    { required: true, message: '手机号为必填项', trigger: 'blur' },
  ],
  specialized: [
    { required: true, message: '专业为必填项', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '家庭住址为必填项', trigger: 'blur' },
  ],
  colleges: [
    {
      required: true,
      message: '请选择院校',
      trigger: 'change',
    },
  ],
  degree: [
    {
      required: true,
      message: '请选择学历',
      trigger: 'change',
    },
  ],
  departmentId: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  postsId: [
    {
      required: true,
      message: '请选择职位',
      trigger: 'change',
    },
  ],
  employeeCategory: [
    {
      required: true,
      message: '请选择员工类别',
      trigger: 'change',
    },
  ]
})
///反填人员信息
const GetModel=()=>{
axios({
    method:"get",
    url:"empread/api/Employee/GetEmployeeById",
    params:{
        id:ruleForm.id
    }
})
.then(res=>{
    ruleForm.employeeName=res.data.data.employeeName
    ruleForm.sex=res.data.data.sex
    ruleForm.phone=res.data.data.phone
    ruleForm.colleges=res.data.data.colleges
    ruleForm.specialized=res.data.data.specialized
    ruleForm.address=res.data.data.address
    ruleForm.degree=res.data.data.degree
    ruleForm.politicalOutlook=res.data.data.politicalOutlook
    ruleForm.ethnicGroup=res.data.data.ethnicGroup
    ruleForm.origin=res.data.data.origin
    ruleForm.marriage=res.data.data.marriage
    ruleForm.dateOfBirth=res.data.data.dateOfBirth
    ruleForm.mailbox=res.data.data.mailbox
    ruleForm.identityCard=res.data.data.identityCard
    ruleForm.departmentId=res.data.data.departmentId
    ruleForm.postsId=res.data.data.postsId
    ruleForm.employeeCategory=res.data.data.employeeCategory
    ruleForm.state=res.data.data.state
    ruleForm.firmId=res.data.data.firmId
    ruleForm.userId=res.data.data.userId
    ruleForm.createName=res.data.data.createName
    ruleForm.createDate=res.data.data.createDate
})
}
//修改人员信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)
      axios({
        method:"post",
        url:"empwrite/api/Employee/UpdateEmployee",
        data:ruleForm
      })
      .then(res=>{
        if(res.data.data>0){
          ElMessage.success("修改成功")
          router.push("/Personnellist")
        }
        else{
          ElMessage.error("修改失败")
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//清空人员信息
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
